<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <div v-if="!showNotData">
        <category-icons></category-icons>
        <home-title :title="homeTitles.viewTitle"></home-title>
        <view-list :view-list="homeData.viewDatas"></view-list>
        <home-title :title="homeTitles.foodTitle"></home-title>
        <food-list :food-list="homeData.foodDatas"></food-list>
        <home-title :title="homeTitles.hoteliTitle"></home-title>
        <hotel-list :hotel-list="homeData.hotelDatas"></hotel-list>
        <home-title :title="homeTitles.massageTitle"></home-title>
        <massage-list :massage-list="homeData.massageDatas"></massage-list>
        <home-title :title="homeTitles.ktvTitle"></home-title>
        <ktv-list :ktv-list="homeData.ktvDatas"></ktv-list>
      </div>
      <div v-if="showNotData">
        <not-data :tips="tips"></not-data>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import CategoryIcons from 'components/ScrollWrapper/CategoryIcons/Index.vue';
  import HomeTitle from './Sub/HomeTitle.vue';
  import ViewList from './ViewList/Index.vue';
  import FoodList from './FoodList/Index.vue';
  import HotelList from './HotelList/Index.vue';
  import MassageList from './MassageList/Index.vue';
  import KtvList from './KtvList/Index.vue';

  import NotData from './Sub/NotData.vue';

  import {
    IndexModel
  } from 'models/index.js';
  import {
    mapState
  } from 'vuex';

  export default {
    name: 'Home',
    data: function() {
      return {
        scroll: null,
        homeData: Object,
        homeTitles: {
          viewTitle: '推荐景点',
          foodTitle: '推荐美食',
          hoteliTitle: '推荐酒店',
          massageTitle: '推荐按摩',
          ktvTitle: '推荐KTV',
        },
        showNotData: false,
        tips: '',
        indexModel: null
      }
    },
    components: {
      "category-icons": CategoryIcons,
      'home-title': HomeTitle,
      'view-list': ViewList,
      'food-list': FoodList,
      'hotel-list': HotelList,
      'massage-list': MassageList,
      'ktv-list': KtvList,
      'not-data': NotData
    },
    computed: {
      ...mapState(['cityId'])
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        mouseWheel: true,
        click: true,
        tap: true
      });
      this.currentCityId = this.cityId;
      this.getHomeDatas(this.cityId);
    },
    activated: function() {
      if (this.currentCityId !== this.cityId) {
        this.currentCityId = this.cityId;
        this.getHomeDatas(this.currentCityId);
      }
    },
    methods: {
      getHomeDatas(cityId) {
        this.indexModel = new IndexModel();
        this.indexModel.getHomeDatas(cityId)
          .then((res) => {
            this.showNotData = false;
            this.homeData = res.data;
          }, (err) => {
            this.showNotData = true;
            this.tips = err.err.message
          });
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
</style>
